<template>
    <div>firstName: <input type="text" v-model="person.firstName" /></div>
    <div>lastName: <input type="text" v-model="person.lastName" /></div>
    <div>fullName: <input type="text" v-model="person.fullName" /></div>
</template>
  
<script>
import { reactive, computed } from "vue";

export default {
    name: "Demo",

    setup() {
        const person = reactive({
            firstName: '张',
            lastName: '三'
        })

        // Vue3 计算属性的简写方法，不可修改
        // person.fullName = computed(() => {
        //     return `${person.firstName} - ${person.lastName}`
        // })

        // Vue3 计算属性完整写法，可以修改
        person.fullName = computed({
            get: () => {
                return `${person.firstName}-${person.lastName}`
            },
            set: value => {
                const splited = value.split('-')
                person.firstName = splited[0]
                person.lastName = splited[1]
            }
        })

        return {
            person
        }
    }
};
</script>
  
<style></style>
  